<template>
<!--  单文件上传-->
  <div class="home">
    <input type="file" ref="file" @change="handleFileChange">
    <button @click="handleUpload">Upload</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      file: null,
      fileName: ""
    }
  },
  methods: {
  handleFileChange() {
    this.file = this.$refs.file.files[0]
    this.fileName = this.file.name
    console.log(this.fileName)
  },
  handleUpload() {
    const chunkSize = 1024 * 1024 //分块大小，每次上传多大文件
    const fileSize = this.file.size//文件大小
    const chunkCount = Math.ceil(fileSize / chunkSize)//文件多少块

    for (let i = 0; i < chunkCount; i++) {
      console.log("上传次数：：" + i + 1)
      const start = i * chunkSize//去除已经上传过的分块
      const end = Math.min(fileSize, start + chunkSize)
      const chunk = this.file.slice(start, end)//上传的文件块
      const formData = new FormData()
      formData.append('file', chunk)
      formData.append('fileName', this.fileName)
      formData.append('chunkNumber', i + 1)
      formData.append('totalChunks', chunkCount)
      axios({
        url: 'task/upload',
        method: 'post',
        data: formData
      })
    }
  }
}
}
</script>
<style>
.drag-btn {
  position: absolute;
  right: -10px;
  top: 0;
  width: 20px;
  height: 100%;
  cursor: ew-resize;
  background-color: #ccc;
  border-radius: 5px;
  border: 1px solid black;
}
</style>



